<template>
  <div class="about">
      <div id="top-status-settings">
        <span class="time" style="float: left">{{time}}</span>
        <img src="@/assets/电 90%.png"
             style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;">
        <img src="@/assets/280-手机网络.png"
             style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
        <img src="@/assets/手机信号.png"
             style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
      </div>
      <div id="bottomlicheng">
        <div style="width: 100%; height: 40px; background-color: #F8F8F8; margin-top: 50px;">
          <img src="../../../assets/向左箭头(灰).png" style="width: 25px; height: 25px; float: left;margin: 6px 0 0 15px" @click="gopersonalUser">
          <p style="float: left; margin: 7px 0 0 120px;font-weight: bolder;font-size : 13pt;">设置</p>
        </div>
        <h1>个人统计</h1>
        <div id="main"></div>
        <div id="licheng"></div>
        <Tabbar/>
      </div>

  </div>
</template>
<script>
import Tabbar from "@/components/Tabbar.vue"
import Vue from 'vue';
import {Tab, Tabs} from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
import * as echarts from "echarts"; export default {
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    // setOption方法设置图表实例的配置项 以及数据 所有参数和数据的修改都可以通过 setOption 完成， ECharts 会合并新的参数和数据，然后刷新图表。
    myChart.setOption({ title: {
    //echarts标题
        text: "当月订单数",
      },
    //tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框。tooltip: {},
    // 不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的位置。
        legend: {},
    //横坐标 xAxis配置 直角坐标系x轴
        xAxis: {
      // xAxis配置
          data: ["1号", "2号", "3号", "4号", "5号", "6号"],
        },
        yAxis: {},
    //系列（series）
    // 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图
    // charts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、
    // graph（关系图）、tree（树图）
        series: [
          {
         name: "订单数",
         type: "bar",
          // y轴配置数据
           data: [5, 20, 36, 10, 10, 20],
          },
        ],
    });
    var mylicheng = echarts.init(document.getElementById("licheng"));
    // 绘制图表
    // setOption方法设置图表实例的配置项 以及数据 所有参数和数据的修改都可以通过 setOption 完成， ECharts 会合并新的参数和数据，然后刷新图表。
    mylicheng.setOption({ title: {
        //echarts标题
        text: "当月运营里程",
      },
      //tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框。tooltip: {},
      // 不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的位置。
      legend: {},
      //横坐标 xAxis配置 直角坐标系x轴
      xAxis: {
        // xAxis配置
        data: ["1号", "2号", "3号", "4号", "5号", "6号"],
      },
      yAxis: {},
      //系列（series）
      // 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图
      // charts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、
      // graph（关系图）、tree（树图）
      series: [
        {
          name: "里程数",
          type: "bar",
          // y轴配置数据
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });


  },
  components: {
    Tabbar,
  },
  data() {
    return {
      time: '',
      value: true,
      value1: true,
      value2: true,
      dialogVisible: false,
      value3: null,
      colors: ['#5FB0CF', '#5FB0CF', '#5FB0CF'],
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    gopersonalUser(){
      this.$router.push("/personalUser")
    },
  },
  created() {
    this.updateTime();
    this.setSignalStatus();
  }
};

</script>
<style>
#main{
  width: 400px; height: 450px;
}
#licheng{
  width: 400px; height: 450px;
}
#bottomlicheng{
  width: 100%;
  height: 100px;
  float: left;
  margin-top: 10px;
  background-color: #F8F8F8;
}
</style>